<template>
    <div>
        <transition>
            <button 
            ref="dragIcon"
            class="dragIcon"
            :style="{width:itemWidth+'px',height:itemHeight+'px'}"
            @click="drawer = true"
            type="primary" style="margin-left: 16px;"
            v-bind:text="text">
                {{ text }}
            </button>
        </transition>

        <el-drawer
        title="使用教程"
        size='40%'
        :visible.sync="drawer"
        :direction="direction"
        :before-close="handleClose">
            
            <template data:buttonText>
                <el-button @click="comName ='UserDataA'">{{ buttonText[0].prop }}</el-button>
                <el-button @click="comName ='UserDataB'">{{ buttonText[1].prop }}</el-button>
            </template>
            <div class="box">
                <component :is="comName"></component>
            </div>

        </el-drawer>
    </div>
</template>

<script>
import UserDataA from '../../../views/dataStatistics/UserDataA.vue';
import UserDataB from '../../../views/dataStatistics/UserDataB.vue';
export default {
    name: 'FloatBtn',
    props:{
        text:{
            type:String,
            default:'点'
        },
        itemWidth:{
            type:Number,
            default:40
        },
        itemHeight:{
            type:Number,
            default:40
        }
    },
    data(){
        return{
            drawer: false,
            direction: 'rtl',
            comName:'UserDataA',
            buttonText:[
                {id:1,prop:'我是品牌方/广告公司'},
                {id:2,prop:'我是MCN/UP主'},
            ]  
        }
    },
    components:{
        UserDataA,
        UserDataB
    },
    computed: {
        key() {
        return this.$route.path
        }
    },
    methods:{
        handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    }
};
</script>

<style scoped lang='less'>
.dragIcon{
    position: fixed;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: orange;
    line-height: 40px;
    text-align: center;
    color: #fff;
    z-index: 100;
}
.routerView{
    width: 450px;
    height: 300px;
    border: 1px solid black;
}
</style>
